<template>
  <div>
    <br />
    <i class="el-icon-paperclip" style="margin-left: 10px;"/> 会员列表
    <el-card style="width: 98%; margin-left: 10px;">
      <br />
      <el-row :gutter="60">
        <el-col :span="11">
          <el-button type="primary" icon="el-icon-user-solid" size="medium" style="margin-left: 25px;"
          @click="addBtn">
            会员注册
          </el-button>
        </el-col>
        <el-col :span="6">
          <el-input size="medium" placeholder="请输入要查询的会员姓名" prefix-icon="el-icon-search"
          :disabled="userList.length==0&&query.length==0" style="margin-left: 60px;" clearable
          v-model="query" @clear="getUserList" @input="getUserList" v-if="mode==='name'"/>
          <el-input size="medium" placeholder="请输入要查询的手机号码" prefix-icon="el-icon-search"
          :disabled="userList.length==0&&query.length==0" style="margin-left: 60px;" clearable
          v-model="query" @clear="getUserList" @input="getUserList" v-else/>
        </el-col>
        <el-col :span="2">
          <el-dropdown @command="selectMode" placement="bottom" style="margin-left: 20px;">
            <el-button type="primary" size="medium" v-if="mode==='name'">
              <i class="el-icon-user-solid"> 会员姓名查询</i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-button type="primary" size="medium" v-else>
              <i class="el-icon-phone"></i> 手机号码查询<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" style="width: 130px;">
              <el-dropdown-item command="name">会员姓名</el-dropdown-item>
              <el-dropdown-item command="phone">手机号码</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="5">
          <el-button type="danger" icon="el-icon-switch-button" size="medium" style="margin-left: 65px;" @click="deleteSelect">注销所选会员</el-button>
        </el-col>
      </el-row>
      <br />
        <el-table :data="userList" height="580"
          v-loading="loading"
          :element-loading-text="tips"
          element-loading-spinner="el-icon-error"
          @select="selectRow" @select-all="selectRow"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}" border
          style="width: 97%;margin-left: 20px;margin-bottom: 30px;">
          <el-table-column type="selection" width="60"></el-table-column>
          <el-table-column prop="id" label="ID" width="60"></el-table-column>
          <el-table-column prop="userName" label="会员姓名" width="250"></el-table-column>
          <el-table-column prop="sex" label="性别" width="100"></el-table-column>
          <el-table-column prop="birthday" label="生日" width="250"></el-table-column>
          <el-table-column prop="phone" label="手机号码" width="250"></el-table-column>
          <el-table-column label="操作" width="548">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-bank-card" size="medium" @click="showCard(scope.row)">查看会员卡</el-button>
              <el-button type="warning" icon="el-icon-edit-outline" size="medium" @click="updateBtn(scope.row)">修改</el-button>
              <el-button type="danger" icon="el-icon-switch-button" size="medium" @click="deleteUser(scope.row)">注销</el-button>
            </template>
          </el-table-column>
        </el-table>
    </el-card>

    <!-- 会员注册对话框 -->
    <el-dialog title="会员注册" :visible.sync="addUserDialog" width="40%" @close="closeAddUserDialog">
      <el-form :model="addUserForm" :rules="rules" ref="addUserFormRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员姓名" prop="userName" style="width: 90%;">
              <el-input v-model="addUserForm.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="addUserForm.sex" label="男"></el-radio>
              <el-radio v-model="addUserForm.sex" label="女"></el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday" style="width: 90%;">
              <el-date-picker
                    v-model="addUserForm.birthday"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone" style="width: 90%;">
              <el-input v-model="addUserForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="密码" prop="password" style="width: 95%;">
          <el-input v-model="addUserForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="密码确认" prop="password2" style="width: 95%;">
          <el-input v-model="addUserForm.password2" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserDialog = false" >取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 会员修改对话框 -->
    <el-dialog title="会员修改" :visible.sync="updateUserDialog" width="40%" @close="closeUpdateUserDialog">
      <el-form :model="updateUserForm" :rules="rules" ref="updateUserFormRef" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员姓名" prop="userName" style="width: 90%;">
              <el-input v-model="updateUserForm.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-radio v-model="updateUserForm.sex" label="男" style="margin-left: 20px;"></el-radio>
              <el-radio v-model="updateUserForm.sex" label="女"></el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生日" prop="birthday">
              <el-date-picker
                    v-model="updateUserForm.birthday"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone" style="width: 90%;">
              <el-input v-model="updateUserForm.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateUserDialog = false" >取 消</el-button>
        <el-button type="primary" @click="updateUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 会员卡展示对话框 -->
    <el-dialog title="查看会员卡" :visible.sync="showCardDialog" width="42%" v-if="cardList.length!==0">
      <el-table :data="cardList" max-height="290px"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 97%;margin-left: 10px;margin-bottom: 30px;"
          >
        <el-table-column prop="id" label="会员卡号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag type="success" style="font-size: 15px;" v-if="scope.row.status===1">正常</el-tag>
            <el-tag type="danger" style="font-size: 15px;" v-else-if="scope.row.status===0">挂失</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="money" label="余额" sortable>
          <template slot-scope="scope">
            <span style="color: saddlebrown;">￥</span>
            <span v-text="scope.row.money" style="color: saddlebrown;"></span>
          </template>
        </el-table-column>
        <el-table-column prop="integral" label="积分" sortable></el-table-column>
      </el-table>
      <span>
        <el-button type="primary" @click="showCardDialog = false" style="margin-left: 340px;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 会员卡展示对话框 -->
    <el-dialog title="查看会员卡" :visible.sync="showCardDialog" width="35%" v-else>
      <div v-loading="true" style="font-size: 35px;margin-top: 30px;"
      element-loading-text="当前会员未注册任何会员卡"
      element-loading-spinner="el-icon-error"></div>
      <el-button type="success" @click="showCardDialog = false" style="margin-left: 280px;margin-top: 90px;">返 回</el-button>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    created() {
      this.getUserList()
    },
    data(){
      //校验手机号的邮箱规则
      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      const checkPassword = (rule, value, callback) => {
        if(this.addUserForm.password !== value) return callback(new Error('2次密码输入不一致'))
        //否则校验成功
        callback()
      }
      return{
        mode:'',
        query:'',
        tips:'',
        loading:'',
        selectList:[],
        userList: [],
        cardList:[],
        addUserForm:{},
        updateUserForm:{},
        showCardDialog:false,
        addUserDialog:false,
        updateUserDialog:false,
        rules: {
          userName: [
                  { required: true, message: '请输入会员姓名', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
          password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
          password2: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                  { validator: checkPassword , trigger: 'blur' }
                ],
          phone: [
                  { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },
                  { validator: checkPhone , trigger: 'blur' }
                ],
          sex: [
                  { required: true, message: '请选择性别', trigger: 'blur' }
                ],
          birthday: [
                  { required: true, message: '请选择日期', trigger: 'blur' }
                ]
        }
      }
    },
    methods:{
      async getUserList(){
        const {data:result} = await this.$http.get(`/user/get?query=${this.query}&mode=${this.mode}`)
        this.userList=result.data
        if(this.userList.length===0&&this.query.length===0){
          this.loading=true
          this.tips='系统未注册任何会员'
        }else{
          this.loading=false
        }
      },
      selectMode(command){
        this.mode=command
        if(this.query.length!==0){
          this.getUserList()
        }
      },
      showCard(user){
        this.getCardList(user)
        this.showCardDialog=true
      },
      async getCardList(user){
        const {data:result} = await this.$http.get(`/card/getCardList?userId=${user.id}`)
        this.cardList=result.data
      },
      addBtn(){
        this.addUserDialog=true
      },
      updateBtn(user){
        this.getUserList()
        this.updateUserDialog=true
        this.updateUserForm=user
      },
      closeAddUserDialog(){
        this.$refs.addUserFormRef.resetFields()
      },
      closeUpdateUserDialog(){
        this.$refs.updateUserFormRef.resetFields()
      },
      async addUser(){
        this.$refs.addUserFormRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          const {data:result} = await this.$http.post('user/add',this.addUserForm)
          if(result.status !== 200) return this.$message.error("会员注册失败!")
          this.$message.success("会员注册成功!")
          if(this.userList.length===0){
            this.query=''
          }
          this.getUserList()
          this.addUserDialog=false
        })
      },
      async updateUser(){
        this.$refs.updateUserFormRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          const {data:result} = await this.$http.put('user/putuser',this.updateUserForm)
          if(result.status !== 200) return this.$message.error("会员修改失败!")
          this.$message.success("会员修改成功!")
          this.getUserList()
          this.updateUserDialog=false
        })
      },
      selectRow(row){
        this.selectList=row
      },
      async deleteSelect(){
        if(this.userList.length===0&&this.query.length===0){
          this.$message.error("系统未注册任何会员!")
          return
        }
        if(this.selectList.length===0){
          this.$message.error("请勾选要注销的会员!")
          return
        }
        this.$confirm('此操作将连同会员名下的会员卡一同注销，确定要注销所选会员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () =>{
          const {data:result} = await this.$http.post(`user/deleteBySelectList`,this.selectList)
          if(result.status!==200) return this.$message.error("会员注销失败!")
          this.$message.success("会员注销成功!")
          this.getUserList()
          this.selectList=[]
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      async deleteUser(user){
        this.$confirm('此操作将连同会员名下的会员卡一同注销，确定要注销该会员吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () =>{
          const {data:result} = await this.$http.delete(`user/delete?id=`+user.id)
          if(result.status!==200) return this.$message.error("会员注销失败!")
          this.$message.success("会员注销成功!")
          this.getUserList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    }
  }
</script>

<style>

</style>
